<!-- @format -->

<template>
  <div class="container">
    <nav>
      <router-link to="/find"> 发现音乐 </router-link>
      <router-link to="/my">我的音乐</router-link>
      <!-- 声明式导航第1种传参：查询字符串 -->

      <!--
        一. to的格式是字符串
          1. 传：<router-link to="/path?参数名1=值1&参数名2=值2..."/>
          2. 接：$route.query.参数名1 
      -->
      <!-- <router-link to="/friend?id=10086&uname=姬霓太美">朋友</router-link> -->
      <!-- 
        二. to的格式是对象 (path + query配合)
          1. 传：<router-link :to="{
            path: '/path',
            query: {
              参数名1: 值1,
              参数名2: 值2,
              ...
            }
          }"/>
          2. 接：$route.query.参数名1 
          注意：!!! 这里虽然把to写成了对象的格式，但最终还是会变成字符串格式传过去
      -->
      <router-link
        :to="{
          path: '/friend',
          query: {
            id: 10086,
            uname: '姬霓太美'
          }
        }"
        >朋友</router-link
      >
    </nav>
    <router-view />
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
  .router-link-active {
    color: red;
    font-size: 18px;
  }
  a {
    margin-right: 15px;
  }
</style>
